<script setup lang="ts">
import { reactive } from 'vue'

defineProps({
  clearFilters: { // 修改columns
    default: () => {},
    type: Function,
  },
  column: {
    default: () => {},
    type: Object,
  },
  confirm: { // 修改columns
    default: () => {},
    type: Function,
  },
  selectedKeys: {
    default() {
      return [] as string[]
    },
    type: Array, // [{ valueType: 'select'| 'radio'| 'input' | 'dateTime' }]
  },
  setSelectedKeys: { // 修改columns
    default: () => {},
    type: Function,
  },
})

const state = reactive({
  searchText: '',
  searchedColumn: undefined,
})
// 列表筛选项输入框
function onClickSearch(selectedKeys: any, confirm: any, dataIndex: undefined) {
  confirm()
  state.searchText = selectedKeys[0]
  state.searchedColumn = dataIndex
}
// 筛选项重置
function onClickReset(clearFilters: any) {
  clearFilters({ confirm: true })
  state.searchText = ''
}
</script>

<template>
  <div style="padding: 8px">
    <!-- 日期 -->
    <a-range-picker
      v-if="column.valueType === 'dateTime'"
      show-time
      :placeholder="['开始时间', '结束时间']"
      format="YYYY-MM-DD HH:mm:ss"
      :value="selectedKeys[0]"
      value-format="YYYY-MM-DD"
      @change="(dateString: any) => setSelectedKeys(dateString ? [dateString] : [])"
    />
    <!-- 输入框 -->
    <a-input
      v-if="column.valueType === 'input'"
      :placeholder="`查询${column.title}`"
      :value="selectedKeys[0]"
      style="width: 188px; margin-bottom: 8px; display: block"
      @change="(e: Event) => setSelectedKeys((e.target as HTMLInputElement).value ? [(e.target as HTMLInputElement).value] : [])"
      @press-enter="onClickSearch(selectedKeys, confirm, column.dataIndex)"
    />
    <a-button
      size="small"
      :disabled="!selectedKeys[0]"
      style="width: 90px"
      @click="onClickReset(clearFilters)"
    >
      重置
    </a-button>
    <a-button
      type="primary"
      size="small"
      style="width: 90px; margin-left: 8px"
      @click="onClickSearch(selectedKeys, confirm, column.dataIndex)"
    >
      确定
    </a-button>
  </div>
</template>
